<template>
  <el-main>
    <el-form
      :model="ReginForm"
      ref="ReginForm"
      :rules="rule"
      class="regform"
      label-width="0">
      <h3 class="login-text">运营商注册</h3>
      <el-form-item prop="operatorPhone">
        <el-input type="text" v-model.number="ReginForm.operatorPhone" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="operatorPassword">
        <el-input type="password" v-model="ReginForm.operatorPassword" placeholder="密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="operatorPassword2">
        <el-input type="password" v-model="ReginForm.operatorPassword2" placeholder="确认密码" show-password></el-input>
      </el-form-item>
      <el-form-item prop="operatorName">
        <el-input type="text" v-model="ReginForm.operatorName" placeholder="名字"></el-input>
      </el-form-item>
      <el-form-item prop="operatorAddress">
        <el-input type="text" v-model="ReginForm.operatorAddress" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item prop="operatorLicence">
        <el-input type="text" v-model="ReginForm.operatorLicence" placeholder="许可证编码"></el-input>
      </el-form-item>
      <el-form-item prop="operatorAccount">
        <el-input type="text" v-model="ReginForm.operatorAccount" placeholder="账号"></el-input>
      </el-form-item>
      <div>
        <input class="auth_input" type="text" v-model="verification"  placeholder="输入验证码" />
        <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">获取验证码</span>
        <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span>秒之后重新发送验证码</span>
      </div>

      <el-form class="form-wrapper" ref="myForm" :model="myForm" label-width="85px">
        <el-form-item label="滑块验证：" style="margin-top: -50px">
          <div style="margin-left: 25px"><slider ref="slider"></slider></div>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="toSubmit">提交</el-button>-->
<!--        </el-form-item>-->
      </el-form>

      <el-form-item >
        <el-button
          type="success"
          class="submitBtn"
          round
          @click.native.prevent="submit"
          :loading="logining">
          注册
        </el-button>
        <hr>
        <p>已经有账号，马上去<span class="to" @click="tologin">登录</span></p>
      </el-form-item>
    </el-form>
  </el-main>

</template>

<script type="text/ecmascript-6">


import slider from './slider'
  export default {
    data () {
      let confirmpasswordCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('密码不能为空'))
        } else {
          return callback()
        }
      }
      let telCheck = (rule, value, callback) => {
        if (value === '') {
          return callback(new Error('电话号码不能为空'))
        } else if (!Number.isInteger(value)) {
          return callback(new Error('电话号码必须是数字'))
        } else if (value.toString().length !== 11) {
          return callback(new Error('电话号码必须是11位数字'))
        } else {
          callback()
        }
      }
      return {
        ReginForm: {
          operatorAccount: '',
          operatorPassword: '',
          operatorPassword2:'',
          operatorName: '',
          operatorPhone: '',
          operatorAddress: '',
          operatorLicence: '',

        },
        myForm: {},
        logining: false,
        sendAuthCode: true,/*布尔值，通过v-show控制显示‘获取按钮'还是‘倒计时' */
        auth_time: 0, /*倒计时 计数器*/
        verification: "",//绑定输入验证码框框
        rule: {
          operatorPassword: [
            {
              required: true,
              message: '密码不能为空',
              trigger: 'blur'
            }
          ],
          operatorPhone: [
            {
              required: true,
              validator: telCheck,
              trigger: 'blur'
            }
          ],
          operatorAddress: [
            {
              required: true,
              message: '地址不能为空',
              trigger: 'blur'
            }
          ],
        }
      }
    },
    components: {
      slider
    },
    methods: {
      submit () {
        // alert("注册界面注册")
        console.log("增加数据是--：" + "账号"+this.ReginForm.operatorAccount+ "密码"+this.ReginForm.operatorPassword+ "名字"+this.ReginForm.operatorName+
          "电话"+this.ReginForm.operatorPhone+ "地址"+this.ReginForm.operatorAddress+ "许可证编号"+this.ReginForm.operatorLicence)
        if (this.ReginForm.operatorAccount == '' || this.ReginForm.operatorPassword == '' ||  this.ReginForm.operatorName ==''
          ||  this.ReginForm.operatorPhone == '' || this.ReginForm.operatorAddress == '' || this.ReginForm.operatorLicence == '' || this.ReginForm.operatorPassword2 == '' ){
          alert("所有内容都不能为空")
          return false;
        }
        if(this.ReginForm.operatorPassword != this.ReginForm.operatorPassword2){
          alert("两次密码不一致，重新输入")
          return false;
        }
        if(this.verification == ''){
          alert("请先获取验证码，验证码不能为空")
          return false;
        }

        this.$axios.post("/insertOperter", {


          'operatorAccount': this.ReginForm.operatorAccount,
          'operatorPassword':this.$md5(this.ReginForm.operatorPassword),
          'operatorName': this.ReginForm.operatorName,
          'operatorPhone': this.ReginForm.operatorPhone,
          'operatorAddress': this.ReginForm.operatorAddress,
          'operatorLicence': this.ReginForm.operatorLicence,
          'verification':this.verification,
          // var this.md5 = crypto.createHash("md5");
         // this.$md5()pdate(this.password) //需要加密的密码
         //  var password = md5.digest('hex');  //password 加密完的密码


        }).then(response => {
          var str = JSON.stringify(response.data)
          console.log("打印了啥++++"+str)
          if (response.data == "1") {

             alert("验证码错误")
          } else if(response.data == "2"){
             alert("注册成功")
          }
        }).catch(err => {
          alert(err)
        })

      },


      reset () {
        this.$refs.ReginForm.resetFields()
      },
      tologin () {
//已经注册过跳转到登入界面
        this.$router.push({
          path: "/Logintest"
        });
      },

      // 验证手机号

      getAuthCode () {
      if (this.$refs['slider']) {
        // 未通过验证时，提示错误信息并返回
        if (!this.$refs['slider'].confirmSuccess) {
          this.$message.error("请拖动滑块验证，进行验证");
          return
        }
      }
      // 通过验证后提交
      // TO DO ...
      this.$message.success("手动验证已通过");
      console.log("电话：" + this.ReginForm.operatorPhone)
      this.$axios.post("/sendcode", {

        operatorPhone: this.ReginForm.operatorPhone,

      }).then(resp => {
        if (resp.data == "1") {
          alert("短信发送成功，请稍查收您的验证码")
          this.sendAuthCode = false;
          //设置倒计时秒
          this.auth_time = 10;
          var auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
        } else if (resp.data == "2"){
           alert("短信发送失败，请输入号码")
        }else if (resp.data == "3"){
          alert("短信发送失败，该账号已被注册")
        }
      }).catch(err => {
        alert(err)
      })



    },
  }
  }
</script>


<style scoped>
  .regform {
    margin: 20px auto;
    width: 310px;
    background: #fff;
    box-shadow: 0 0 10px #B4BCCC;
    padding: 30px 30px 0 30px;
    border-radius: 25px;
  }
  .submitBtn {
    width: 65%;
  }
  .to {
    color: #FA5555;
    cursor: pointer;
  }
  .auth_input{
    width:105px;
    height:38px;
    margin-bottom:20px;
    border:1px solid #DCDFE6;
    /* color:red; */
    padding-left:10px;
    border-radius: 8%;
  }
  .regform[data-v-92def6b0]{
    width:370px;
    min-height: 440px;
  }
  .login-text{
    text-align: center;
    margin-bottom:20px;
  }
  .form-wrapper {
    margin-top: 50px;
    width: 300px;
  }
</style>
